<template>
  <div class="rebackExpress">
    <h1>退货物流</h1>
    <div class="inputContainer">
      <div>
        <span>物流公司：</span>
        <el-select
          v-model="express"
          filterable
          placeholder="请选择物流公司（可输入内容进行搜索）"
        >
          <el-option
            v-for="item in options"
            :key="item.dictId"
            :label="item.dictName"
            :value="item.dictId"
          />
        </el-select>
      </div>
      <div>
        <span>物流单号：</span>
        <el-input v-model="expressid" maxlength="20" placeholder="请输入物流单号" />
      </div>
    </div>
    <el-button @click="submitExpress">确认提交</el-button>
  </div>
</template>

<script setup>
import {
  getExpressCompany
} from '@/api/user/express.js'
import { ref } from 'vue'
const options = ref([])
const expressid = ref('')
const express = ref('')
async function getExpressOption () {
  const response = await getExpressCompany()
  const res = response.data
  if (res.code === '200') {
    this.options.value = res.data
  } else {
    ElMessage({
      message: res.message,
      type: 'warning'
    })
  }
}
const emit = defineEmits(['submit'])
function submitExpress () {
  emit('submit', {
    deliverFormid: this.expressid.value,
    express: this.express.value
  })
}
getExpressOption()
</script>

<style lang="scss" scoped>
.rebackExpress{
  height: 200px;
  padding: 20px 30px;
  border: 1px solid #F3F4F5;
  .inputContainer{
    height: 40px;
    margin-top: 10px;
    display: flex;
    div{
      flex: 1;
      display: flex;
      align-items: center;
      span{
        width: 150px;
        text-align: right;
      }
      :deep(.el-input__inner){
        border-radius: 0;
      }
    }
  }
  .el-button{
    width: 200px;
    height: 50px;
    display: block;
    margin: 30px auto;
    color: #FFEBC4;
    background-color: #333333;
    border-radius: 0;
  }
}
</style>
